<template>
  <div class="sbs-login-box">
    <snowflakes :flag="true"></snowflakes>
    <el-form ref="loginform" :model="m" class="login-form-box" size="small" label-position="left" label-width="0px">
      <h3 class="from-title">
        <img class="logo" :src="curs.logo">
        <span>{{ curs.code }}·{{ curs.name }}</span>
      </h3>
      <el-form-item prop="user">
        <el-input type="text" prefix-icon="el-icon-user" v-model="m.user" placeholder="请输入用户名">
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" prefix-icon="el-icon-link" v-model="m.pwd" placeholder="请输入密码" show-password>
        </el-input>
      </el-form-item>
      <el-form-item>
        <slider ref="verify"></slider>
      </el-form-item>
      <el-form-item>
        <span style="color: #999;">
          <el-checkbox v-model="m.remember">记住我</el-checkbox>
        </span>
      </el-form-item>
      <el-form-item>
        <div class="scs-opr">
          <el-button type="primary" plain size="medium" :loading="loading" @click="ok()">登录</el-button>
          <el-button type="info" plain size="medium" @click="register()">注册</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import slider from '@/components/slider';
import settings from '@/settings';
import snowflakes from '@/components/snowflakes'
import init from '@/csl-init';

export default {
  name: "sbs-index",
  components: {
    slider,
    snowflakes
  },
  data() {
    return {
      loading: false,
      curs: sa.$sys.getCurSer(),
      snowflakes: 100,
      s: null,
      m: {
        user: settings.user_name,
        pwd: settings.user_pwd,
        remember: false,
      },
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.s = route.query.s
      },
      immediate: true
    }
  },
  created: function () {
    this.m.sid = this.curs.id
  },
  methods: {
    ok() {
      this.loading = true;
      sa.checkNull(this.m.user, '请输入用户名');
      sa.checkNull(this.m.pwd, '请输入密码');

      if (this.$refs.verify && !this.$refs.verify.confirmSuccess) {
        this.$message.warning("请拖动滑块验证");
        return;
      }
      if (this.s == 'console') {
        // 控制台
        this.sa.ajax('/sso/login', this.m, function (res) {
          // 写入token
          if (res.data.token) {
            if (this.m.remember) {
              sessionStorage.setItem('token', res.data.token);
            }
            // token
            sa.$sys.setToken(res.data.token)

            // 用户信息，保存到本地中
            sa.$sys.setCurUser(res.data.u);

            // 服务
            if (res.data.curs) {
              // 用户-服务信息
              sa.$sys.setCurAllSer(res.data.curs);

              // 清空权限缓存
              sa.$sys.removeCurm()

              // 当前服务
              sa.$sys.setCurSid(res.data.curs[0].id)

              // 开始初始化
              init();

              // 等待跳转页面
              this.$router.push({
                path: settings.waiting_,
                query: {
                  q: 1,
                }
              })
            }
            // 打个招呼，进入 index
            this.sa.msg('欢迎你：' + res.data.u.name);
          }
          this.loading = false
        }.bind(this), {
          type: "get"
        });
      } else {
        // 非控制台
        sa.ajax('/user/login', this.m, function (res) {
          // 写入token
          if (res.code === 200 && res.data.token) {
            if (this.m.remember) {
              sessionstorage.setitem('token', res.data.token);
            }
            // token
            sa.$sys.setToken(res.data.token)

            // 用户信息，保存到本地中
            sa.$sys.setCurUser(res.data.u);

            // 打个招呼，进入 index
            this.sa.msg('欢迎你：' + res.data.u.name);

            // 等待跳转页面
            this.$router.push({
              path: settings.waiting_,
              query: {
                q: 1,
              }
            })
          }
          this.loading = false
        }.bind(this), {
          type: 'get'
        });
      }
    },
    // 注册
    register() {
      this.$router.push({
        path: settings.sbs_register
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.sbs-login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  backdrop-filter: blur(2px);
  animation: gradientbg 5s ease infinite;
}

@keyframes gradientbg {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.login-form-box {
  border-radius: 16px;
  background-clip: padding-box;
  width: 450px;
  padding: 40px 35px 15px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

.from-title {
  font-size: 24px;
  color: #555555;
  margin: 0 0 30px;
  text-align: center;
  position: relative;
}

.logo {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 15px;
  border-radius: 50%;
  background-color: #f7f6f6;
}

.scs-opr {
  display: flex;
  justify-content: center;
  margin: 20px 0 10px;

  .el-button {
    width: 120px;
    margin: 0 10px;
  }
}
</style>
